<template>
  <div class="Tables">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column prop="school_id" label="驾校名称"  align="center">
        <template slot-scope="scope">
           <span v-if="scope.row.school_id.title">{{scope.row.school_id.short_title}}</span>
           <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="school_id" label="企业名称"  align="center">
        <template slot-scope="scope">
           <span v-if="scope.row.school_id.title">{{scope.row.school_id.title}}</span>
           <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="rule_id" label="规则类型"  align="center">
        <template slot-scope="scope">
           <span v-if="scope.row.rule_id!=''">{{scope.row.rule_id.type}}</span>
           <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="rule_id" label="规则详情"  align="center">
         <template slot-scope="scope">
           <span v-if="scope.row.rule_id!=''">{{scope.row.rule_id.detail}}</span>
           <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="rule_id" label="结算规则"  align="center">
         <template slot-scope="scope">
           <span v-if="scope.row.rule_id!=''">{{scope.row.rule_id.rule}}</span>
           <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态"   align="center" >
         <template slot-scope="scope">
           <span v-if="scope.row.status.title" :class="scope.row.status.class">{{scope.row.status.title}}
             <span  v-if="scope.row.cancel_user!=''" style="color:#999;">(取消中)</span>
           </span>
           <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="end_time" label="有效期至" align="center" ></el-table-column>
      <el-table-column prop="create_time" label="申请时间"  align="center">
        <template slot-scope="scope">
           <span v-if="scope.row.create_time">{{scope.row.create_time}}</span>
           <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="approval_user" label="审核人"  align="center">
        <template slot-scope="scope">
           <span v-if="scope.row.approval_user">{{scope.row.approval_user}}</span>
           <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="approval_time" label="审核时间"  align="center">
        <template slot-scope="scope">
           <span v-if="scope.row.approval_time">{{scope.row.approval_time}}</span>
           <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center" width="200" :render-header="renderTip" v-if="checkPermission(['jointApplySetting','jointApplyCancel','jointApplyReject'])">
         <template slot-scope="scope">

           <span class="edittext"  v-if="(scope.row.status.value==-1||scope.row.status.value==2 )">
             <span class="edittext" v-if="checkPermission(['jointApplySetting'])" @click="configuration(scope.row.id)">
               <span v-if="scope.row.status.value==2">重新</span>配置
             </span>
             <span class="edittext" v-if="checkPermission(['jointApplyReject'])"  @click="commbtn(scope.row.id,'驳回',-1)">驳回</span>
           </span>
            <div class="" v-else-if="scope.row.status.value===1&&checkPermission(['jointApplyCancel'])" >
                <span v-if="scope.row.cancel_who!=0">
                    <span v-if="scope.row.cancel_who==1" class="edittext" @click="cancel(scope.row.id,'取消接入')">同意取消接入</span>
                    <span v-else>-</span>
                </span>
                    <span v-else class="edittext" @click="cancel(scope.row.id,'取消接入')">取消接入</span>

            </div>
            <span class="awaittext" v-else >-</span>
         </template>
       </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next"
          :total="pages.total">
        </el-pagination>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {updatestate} from '@/api/enroll'
import { mapGetters } from 'vuex'
//api
  //按钮权限验证
  import checkPermission from "@/utils/permission";
import {approvalcancel,approval} from '@/api/platform'
export default {
  data() {
    return {
      //表格数据
      tableData: [],
      //页码数据
      pages:{},
      currentPage4:4,
      tableData: [],
    }
  },
  props: {
     //表格数据
    tabData:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  computed:{
    ...mapGetters({
        permissions: 'user/permissions',
      }),

  }
,
  methods: {
    checkPermission,
    //驳回
    commbtn(id,textcontent,status){
      let params = {
        platformId:id,
        status
      }
      this.$confirm(`您确认要${textcontent}吗?`, '温馨提示', {
          confirmButtonText: textcontent,
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let data = await approval(params)
          if(data.code=='0000'){
             //刷新列表
         this.$emit('refreshtable',2)
         this.$message.success(textcontent+'成功！')
          }
        }).catch(() => {

        });
    },
   //取消接入
    cancel(id,textcontent){
      let params = {
        platformId:id,
        _request:2
      }
      this.$confirm('您确认要取消接入吗?', '温馨提示', {
          confirmButtonText: '暂不取消',
          cancelButtonText: '取消接入',
          type: 'warning'
        }).then( () => {

        }).catch(async () => {
          let data = await approvalcancel(params)
          if(data.code=='0000'){
             //刷新列表
         this.$emit('refreshtable',2)
         this.$message.success(textcontent+'成功！')
          }

        });
    },
    //点击配置弹窗
    configuration(id){
      this.$emit('openconfig',id)
    },
    //审核状态 提示
    renderTip(h, { column }) {
      return h(
        'div',
        {
          style: 'display:flex;margin:0 auto; justify-content: center;',
        },
        [
          h('span', column.label),
          h('promptmessage', {
            props: {
              messages: ['操作说明：','1、驾校点击“申请接入”提交申请；','2、等待平台配置接入规则','3、平台配置好规则后，驾校可进行以下操作：','同意：表示同意该条规则，平台接入成功；','驳回：表示不同意该条规则，返回平台重新配置；','撤回：表示不同意该条规则，且取消本次接入申请；','4、平台接入成功后，驾校可点击“取消接入”，','校和平台均确认后取消接入生效（备注：取消接入生','效前，该条接入信息仍然有效）。'],
            },
          }),
        ]
      )
    },
    //翻页
    handleSizeChange(val) {
      this.$emit('changepageTotal',val)
      },
      //翻页触发事件
      handleCurrentChange(val) {
        this.$emit('changepage',val)
      }
  },
  components:{
  },
  mounted(){
    this.tableData = this.tabData.list
    this.pages = this.tabData.page
  },
  watch:{
   tabData(val){
      this.tableData = val.list
      this.pages = val.page
   }
  },
  updated(){
  }
}
</script>

<style scoped lang='scss'>
.Tables {
  margin-top: 25px;
}
.edittext{
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
}
.pagination{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.edittext{
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
  font-size: 13px;
}
</style>
